<template>
	<view>
		<view>地区选择器</view>
		<picker @change="xuan" :range="arr" :value="index">
			<view>{{arr[index]}}</view>
		</picker>
	</view>
	
	<view>
		<view>时间选择器</view>
		<picker mode = "time" :value="time" @change="shi" start="12:01" end="16:01">
			<view>{{time}}</view>
		</picker>
	</view>
	
	<view>
		<view>日期选择器</view>
		<picker mode = "date" :value="date" @change="ri">
			<view>{{date}}</view>
		</picker>
	</view>
</template>
<script setup>
	import {  ref } from 'vue';
	const arr=["中国","法国","美国","英国"];
	const index=ref(0)
	
	const xuan=(e)=>{
		console.log(e);
		index.value=e.detail.value
	}
	
	const time=ref("12:01");
	const shi=(e)=>{
		time.value=e.detail.value
	}

	const  getDate=(type)=>{
		const date=new Date();
		let year=date.getFullYear();
		let month=date.getMonth()+1;
		let day=date.getDate();
		if(type==='start'){
			year=year-10;
		}else if(type==='end'){
			year=year+10;
		}
		month=month>9?month:'0'+month;
		day=day>9?day :'0'+day;
		return `${year}-${month}-${day}`;
	}
	
	const date=ref(getDate())
	const startDate=getDate('start')
	const endDate=getDate('end')
	const ri=(e)=>{
		date.value=e.detail.value
	}
	
</script>

<style lang="scss">
	
</style>